<template>
    <el-header>
        <div class="l-content">
            <el-button @click="handleCollapse">
                <el-icon><Menu /></el-icon>
            </el-button>
            <el-breadcrumb separator="/" class="bread">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="current.path" v-if="current">{{ current.label }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="r-content">
            <el-dropdown>
                <img :src="getImgSrc()" alt="">
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item @click="loginOut">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>           
    </el-header>
</template>

<script>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import {useStore} from 'vuex'

export default {
    setup(){
        const store = useStore()
        const router = useRouter()
        const getImgSrc = () =>{
            //console.log(import.meta,'/');
            //console.log(new URL(`../assets/images/1.png`,import.meta.url).href);
            return new URL(`../assets/images/1.png`,import.meta.url).href
        }
        const handleCollapse =()=> {
            store.commit('UPDATE_COLLAPSE')
        }
        const current = computed(()=>{
            return store.state.currentMenu
        })
        const loginOut = ()=>{
            store.commit('LOGIN_OUT')
            router.push({name:'login'})
        }
        return {
            getImgSrc,
            handleCollapse,
            current,
            loginOut
        }
    }
}
</script>

<style lang="less" scoped>
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: #333;
}
.r-content{
    img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
}
.l-content{
    display: flex;
    align-items: center;
    h3{
        color: #fff;
        margin-left: 20px;
    }
    /* .bread /deep/ span{
        color: #fff;
        cursor: pointer; 
        margin-left: 10px;
    } */
    :deep(.bread span){
        color: #fff;
        cursor: pointer; 
        margin-left: 10px;
    }
}
</style>